<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>tencetAI</title>
    <link rel="stylesheet" href="css/weui.min.css">
</head>
<style type="text/css">
.page__hd {
    padding: 40px;
}

.img {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

img {
    width: 45%;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
</style>

<body ontouchstart>
    <div class="page__hd">
        <h1 class="page__title">
            腾讯AI
        </h1>
    </div>
    <div class="img">
        <img src="timg3.jpg" alt="">
        <img src="timg3.jpg" alt="" id="newImage">
    </div>
    <div class="footer">
        <button class="weui-btn weui-btn_default" id="selectType">选择</button>
        <button class="weui-btn weui-btn_primary" onclick="test()">查看</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
<script type="text/javascript" src="js/selectTypeArr.js"></script>
<script type="text/javascript">
var type, param;
document.querySelector('#selectType').addEventListener('click', function() {
    weui.picker(selectTypeArr, {
        className: 'custom-classname',
        container: 'body',
        defaultValue: [0, 0],
        onChange: function(result) {
            console.log(result)
        },
        onConfirm: function(result) {
            type=result[0].value;
            param=result[1].value;
            console.log('type: '+type+' param: '+param)
        },
        id: 'selectType'
    });
});


var cache = {};

function test() {
    var pic = cache[type + param];
    if (pic) {
        $('#newImage').prop('src', pic)
        return;
    }
    $.ajax({
        url: 'demo.php',
        type: 'post',
        dataType:'json',
        data: {
            type: type,
            param: param,
        },
        success: function(res) {
            console.log(res);
            $('#newImage').prop('src', res.image)
            cache[type + param] = res.image;
        }
    });
}
</script>

</html>